<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>添加图书</title>


    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">

<section>
    <!-- 左边开始-->
    <div th:replace="common :: leftmenu"></div>
    <!-- 左边结束-->

    <!--主要内容开始-->
    <div class="main-content" >
        <!-- 头部分开始-->
        <div th:replace="common :: headermenu"></div>
        <!-- 头部分结束-->
        <!-- 页面标题开始-->
        <div class="page-heading">
            <h3>
                图书信息
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">精选图书</a>
                </li>
                <li>
                    <a href="#">推荐图书</a>
                </li>
                <li class="active"><a href="#">特价图书</a></li>
            </ul>
        </div>
        <!-- 页面标题结束 -->

        <!--身体包装员开始-->
        <div class="wrapper">
             <div class="row">
                <div class="col-sm-12">
                <section class="panel">
                <header class="panel-heading">
                    添加图书
                    <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                         <!--    返回键    -->
                     <a th:href="@{/editable_table}" class="fa fa-times"></a>
                     </span>
                </header>
                    <form th:action="@{/addbook}" method="post" enctype="multipart/form-data">
                        <table >

                            <tr>
                                <td>书名：</td>
                                <td><input type="text" name="name"   /></td>
                            </tr>
                            <tr>
                                <td>图书图片：</td>
                                <td><img id="book-pic" width="170px" height="200px" th:src="@{/images/no/notuploaded.jpeg} ">
                                    <input type="file"  id="book-file" name="upload" onchange="show(this)" /></td>
                            </tr>
                            <tr>
                                <td>作者：</td>
                                <td><input type="text" name="author"  /></td>
                            </tr>
                            <tr>
                                <td>出版社：</td>
                                <td><input type="text" name="publisher"  /></td>
                            </tr>
                            <tr>
                                <td>原价：</td>
                                <td><input type="text" name="oldPrice"  /></td>
                            </tr>
                            <tr>
                                <td>现价：</td>
                                <td><input type="text" name="newPrice" /></td>
                            </tr>
                            <tr>
                                <td>作者地址：</td>
                                <td><input type="text" name="authorLoc" /></td>
                            </tr>
                            <tr>
                                <td>介绍：</td>
                                <td><textarea name="info"  rows="5" cols="50"  ></textarea></td>
                            </tr>
                            <tr>
                                <td>isbn：</td>
                                <td><input type="text" name="isbn"   /></td>
                            </tr>
                            <tr>
                                <td>分类：</td>

                                <td><input type="radio" name="category" th:value="SELECTED"  />精选图书
                                    <input type="radio" name="category"  th:value="RECOMMEND" />推荐图书
                                    <input type="radio" name="category"  th:value="BARGAIN" />特价图书
                                </td>
                            </tr>
                            <tr>
                                <td>套装：</td>
                                <td><input type="radio" name="suit"  th:value="YES"  />是
                                    <input type="radio" name="suit"  th:value="NO"  />否

                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td><input type="submit" value="提交" /></td>
                            </tr>

                        </table>
                    </form>

                </section>
                </div>
                </div>
        </div>
        <!--身体包装端结束-->

        <!--footer section start-->
        <footer>
            2021 &copy; 后台管理
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>

<!-- 最后把js文件的页面加载速度 -->
<div th:replace="common :: commonscript"></div>

<!--data table-->
<script type="text/javascript" src="js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>




<!--script for editable table-->
<script src="js/editable-table.js"></script>

<!-- END JAVASCRIPTS -->
<script>

    jQuery(document).ready(function() {
        EditableTable.init();
    });
    function show(f) {
        var rd = new FileReader();//创建文件读取对象
        var files = f.files[0];//获取file组件中的文件
        rd.readAsDataURL(files);//文件读取装换为base64类型
        rd.onloadend = function() {
            //加载完毕之后获取结果赋值给img
            document.getElementById("book-pic").src = this.result;
        }
    }

</script>


</body>
</html>
